<!--
  - Copyright (c) 2021.  北京维数科技有限公司
  - Date :  2021/3/25
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.0.0
  -->

<template>
  <div id="fmapmain">
    <div class="abstatic-height"></div>
    <div class="map-mode-pannel" :class="{'map-pannel-show':isSelectMode}" v-loading="mapLoad">
      <el-amap vid="fmamap" ref="map" resizeEnable='true' :plugin="plugin" :amap-manager="amapManager" :center="center" :zooms="zooms" :zoom="zoom" :events="events" class="mapset" :viewMode='vmode' :pitch="vrotate">
        <el-amap-marker v-for="(marker, index) in markers" :key="marker.id" :position="marker.position" :vid="index" :id="marker.id" :events="marker.events">
          <div class="map-marker-wrap">
            <div class="main-map-marker" :class="{'main-map-marker__abnormal': marker.status=='0', 'main-map-marker__notify': marker.status=='1'}" @click="showSensor(marker.id)"></div>
            <p class="bubble" @click="showSensor(marker.id)" @touchstart="showSensor(marker.id)">
              <i class="build-name">{{marker.label}}</i>
              <i class="arrow-up"></i>
            </p>
          </div>
        </el-amap-marker>
      </el-amap>
    </div>
    <!-- 列表模式 -->
    <div class="list-mode-pannel" :class="{'list-pannel-show':!isSelectMode}">
      <el-scrollbar style="height: 100%;">
        <mapListModel :loadData="!isSelectMode" :channelId.sync="channelId" @showSensor="showSensor"></mapListModel>
      </el-scrollbar>
    </div>
    <div class="map-tool">
      <div class="map-tool__right" :class="{toolspannel:isExpand}">
        <div class="map-tool-rightwrap">
          <div class="line-with-verticl" style="border-bottom: 1px solid #50E3C2;opacity: 0.7"></div>
          <div class="all-sensor-list line-with-verticl">
            <div class="all-sensor-list__item">
              <p class="title">报警设备（个）</p>
              <p class="count" v-if="totalStatus" style="color: #FF3A0A">{{totalStatus.callCount}}</p>
              <p class="count" v-else>-</p>
            </div>
            <div class="all-sensor-list__item all-sensor-line">
              <p class="title">故障设备（个）</p>
              <p class="count" v-if="totalStatus" style="color: #F5A623">{{totalStatus.faultCount}}</p>
              <p class="count" v-else>-</p>
            </div>
            <div class="all-sensor-list__item">
              <p class="title">正常设备（个）</p>
              <p class="count" v-if="totalStatus" style="color: #50E3C2">{{totalStatus.normalCount}}</p>
              <p class="count" v-else>-</p>
            </div>
          </div>

          <el-radio-group v-model="unhandleList" size="small" class="unhandle-list" @change="unhandleChange">
            <el-radio-button label="fireUntreated">未处理报警</el-radio-button>
            <el-radio-button label="breakUntreated">未处理故障</el-radio-button>
          </el-radio-group>
          <div class="untreated-list" v-loading="loading">
            <div class="wrap-with-halfboder"></div>
            <div v-if="unhandleItems.length>0" style="height:100%">
              <el-scrollbar style="height:100%">
                <dl class="untreated-list-item" v-for="item in unhandleItems" :key="item.id">
                  <dt @click="showSensor(item.buildId)" style="cursor: pointer"><i><icon-svg icon-class="building" style="fill:#50E3C2"/></i>{{item.bName}}
                  </dt>
                  <dd class="untreated-pain">设备系列:{{item.series}}</dd>
                  <dd class="untreated-pain">设备位置:{{item.position}}</dd>
                  <dd class="untreated-pain">报警时间:{{item.date}}</dd>
                  <dd class="untreated-handle">
                    <el-button type="text" @click="handleRows(item.id)"><i style="margin-right: 5px"><icon-svg icon-class="chuli" style="fill:#50E3C2"/></i>处理</el-button>
                  </dd>
                </dl>
                <div class="loadmore-btn-goto" v-if="unhandleItems.length>=20">
                  <el-button type="text" @click="checkMore">查看更多</el-button>
                </div>
              </el-scrollbar>
            </div>
            <div v-else>
              <p class="none-list" v-if="alarmtype==1">暂无未处理报警</p>
              <p class="none-list" v-else>暂无未处理故障</p>
            </div>
          </div>
        </div>
        <div class="tool-wrap line-with-verticl" :class="{'map-width-select':!isSelectMode}">
          <div class="over-topline line-with-verticl"></div>
          <div class="tool-wrap-items">
            <div class="map-listchange__mode" :class="{'map-mode-select':isSelectMode}" @click="changeMode('map')"><i class="icon-map-location"><icon-svg icon-class="ditumoshi" /></i>地图模式</div>
            <div class="map-listchange__mode" :class="{'list-mode-select':!isSelectMode}" @click="changeMode('list')"><i class="class-icon-san"><icon-svg icon-class="listview" /></i>列表模式</div>
            <div @click="handleCommand('showtrafic')" class="map-tool-item" v-show="isSelectMode">
              <i class="dropdwon-svg-icon">
                <icon-svg icon-class="lukuang" style="fill:rgba(255, 255, 255, 0.7)" />
              </i>路况</div>
            <div @click="handleCommand('showpich')" class="map-tool-item" v-show="isSelectMode">
              <i class="dropdwon-svg-icon">
                <icon-svg icon-class="ceju" style="fill:rgba(255, 255, 255, 0.7)" />
              </i>测距
            </div>
            <div class="map-dotshow-wrap" v-show="isSelectMode">
              <span><i class="css-icon-warning"></i>报警</span>
              <span><i class="css-icon-breakdown"></i>故障</span>
            </div>
            <div class="map-search" v-show="isSelectMode">
              <el-dropdown @command="selectHandle">
            <span class="el-dropdown-link">
              {{droptext}}<i class="el-icon-caret-bottom el-icon--right"></i>
            </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="1">建筑</el-dropdown-item>
                  <el-dropdown-item command="2">地名</el-dropdown-item>
                  <el-dropdown-item command="3" v-if="issuperadmin">站点</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-autocomplete v-show="localSearch=='1'"
                               class="search-select" popper-class="propper-class" v-model="selectBuildId" :fetch-suggestions="querySearch" placeholder="请输入建筑名" @select="handleSelect" clearable>
              </el-autocomplete>
              <el-select
                style="width:220px"
                v-show="localSearch=='2'"
                v-model="searchAddressKw"
                filterable
                clearable
                remote
                reserve-keyword
                placeholder="请输入地址"
                :remote-method="remoteMethod"
                @change="selectedAddress"
                value-key="location"
                :loading="loading">
                <el-option
                  v-for="(item,index) in searchAddressList"
                  :key="index"
                  :label="item.name"
                  :value="item">
                  <span>{{ item.name }}</span>
                  <span style="color: #999; font-size: 12px">{{ item.district }}</span>
                </el-option>
              </el-select>
              <el-autocomplete v-show="localSearch=='3'"
                               class="search-select" popper-class="tenant-propper-class" v-model="selectTenant" :fetch-suggestions="tenantSearch" placeholder="请输入关键词" @select="handleSelecttenant">
              </el-autocomplete>
            </div>
            <div class="map-tool__left">
              <div class="map-tool-sensors" :class="{toolsexpand:isExpand}" @click="changeIt">
                <i class="class-icon-show">
                  <icon-svg icon-class="show" style="fill:#50E3C2" />
                </i>
                <i class="class-icon-hide">
                  <icon-svg icon-class="hide" style="fill:#50E3C2" />
                </i>
                报警列表
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <planDialog :Show.sync="realtimePointShow" :buildId.sync="buildId" :channelId.sync="channelId"></planDialog>
    <el-dialog title="处理提示"
               :visible.sync="isdelalram"
               :show-close='false'
               :close-on-click-modal='false'
               :close-on-press-escape='false'
               custom-class="xf-jc-dialog" width="360px" height="160px">
      <div class="xf-jc-deletect">
        <el-radio-group v-model="switchalramtype" v-if="alarmtype==1">
          <el-radio label="1">真实火警</el-radio>
          <el-radio label="2">火警测试</el-radio>
          <el-radio label="0">误报</el-radio>
        </el-radio-group>
        <p v-else>当前故障确认已处理吗？</p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="handleSure(rowsId)">确定</el-button>
        <el-button size="mini" type="text" @click="isdelalram=false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import clip from '@/utils/clipboard' // use clipboard directly
  import { mapGetters } from 'vuex'
  import planDialog from "./components/realtimePoints";
  import mapListModel from "./components/mapListModel";
  import {getAllStatus,getBuildingList,getUnhandleList,changeFireRsolve} from  "@/api/device/deviceFireMain/index";
  import {
    getAllTenant,
    getTenantPos,
    getMaxAlarm
  } from "@/api/datahandler/deviceAbnormal/index";

  import { AMapManager } from "vue-amap";

  let amapManager = new AMapManager();
  let cluster;
  export default {
    name: "fireMain",
    components: { planDialog ,mapListModel},
    data() {
      let self = this;
      return {
        isSelectMode:true,
        droptext:'建筑',
        isdelalram:false,
        switchalramtype:'1',
        rowsId:'',
        alarmtype:'1',
        total: null,
        totalStatus:{},
        listQuery: {
          page: 1,
          limit: 20,
          alrmCategory:1
        },
        unhandleItems:[],
        unhandleList:'fireUntreated',
        buildId: "",
        searchAddressKw:'',
        searchAddressList:[],
        queryParams: {
          channelId: ""
        },
        channelId: "",
        cCount: 1,
        realtimePointShow: false,
        markers: [],
        markerRefs: [],
        showTraffic: true,
        showhide: true,
        Trafficlay: undefined, //实时交通图层
        rulerFn: undefined, //测距工具
        ruleroff: true,
        mouseToolOjb:undefined, //鼠标测量工具
        desme:undefined, // 密度计算工具
        localSearch: "1",
        searchOption: {
          city: "武汉",
          citylimit: false
        },
        input5: "",
        isExpand: true,
        buildingList: [],
        selectBuildId: '',
        selectTenant:'',
        list: [],
        tenantlist:[],
        loading: false,
        mapLoad: true,
        states: [],
        center: [114.42377,30.50469],
        // center: {lng: 0, lat: 0},
        zooms:[5,19],
        lng: 0,
        lat: 0,
        zoom: 12,
        resized: true,
        vmode: "3D",
        vrotate: 55,
        amapManager,
        clusterobj:undefined,
        events: {
          init: o => {
            o.setMapStyle('amap://styles/117f36d1e643cfd46d21660d866df29e');
            // 点聚合功能
            setTimeout(() => {
              cluster = new AMap.MarkerClusterer(o, self.markerRefs,{
                gridSize: 80,
                minClusterSize:2,
                maxZoom:17,
                renderCluserMarker: self._renderCluserMarker
              });
              self.clusterobj = cluster;
              self.mapLoad = false;
            }, 1000);
            let _map = amapManager.getMap();
            _map.on('complete', () => {
              self.getMapCenter()
            })
          }
        },
        plugin: [
          {
            pName: "CitySearch",
            // showMarker:false,
            events: {
              init(o) {
                // o 是高德地图定位插件实例
                // o.getCurrentPosition((status, result) => {
                //   if (result && result.position) {
                //     console.log(result);
                //     self.lng = result.position.lng;
                //     self.lat = result.position.lat;
                //     self.center = [self.lng, self.lat];
                //     self.$nextTick();
                //   }
                // });
                o.getLocalCity(function (status, result) {
                  if (status === 'complete' && result.info === 'OK') {
                    if (result && result.city && result.bounds) {
                      var cityinfo = result.city;
                      var citybounds = result.bounds;
                      let map = amapManager.getMap();

                      map.setBounds(citybounds);
                      map.setZoom(12.2)

                    }
                  }
                })
                // o.getCity(function(result){
                //     console.log(result)
                // })
              }
            }
          },
          {
            pName: "Scale",
            events: {}
          }
        ]
      };
    },
    computed:{
      ...mapGetters([
        'issuperadmin'
      ])
    },
    mounted() {
      this.fetchData();
      //页面高度
      let mapmainHeight = document
        .querySelector(".sidebar-container")
        .getBoundingClientRect().height;

      // map高度
      let mapHeight = mapmainHeight;
      document.querySelector("#fmapmain").style.height = mapHeight + "px";
      // 建筑物跟进ws触发更新
      let ele = this;
      this.bus.$on('getBuildingStatus', function (val) {
        ele.getBuildList(ele.queryParams);
      })
    },
    beforeDestroy(){
      this.bus.$off('getBuildingStatus');
    },
    methods: {
        getMapCenter() {
            getMaxAlarm(this.queryParams).then((res)=>{
                this.center = res.data.gis.split(',')
            })
        },
      _renderCluserMarker(context) {
        // 点聚合方法
        const count = this.markers.length;

        let factor = Math.pow(context.count/count, 1/18);
        let div = document.createElement('div');
        let Hue = 180 - factor* 180;
        // let bgColor = 'hsla('+Hue+',100%,50%,0.7)';
        // let fontColor = 'hsla('+Hue+',100%,20%,1)';
        // let borderColor = 'hsla('+Hue+',100%,40%,1)';
        // let shadowColor = 'hsla('+Hue+',100%,50%,1)';
        let bgColor = 'hsla(153,100%,33%,0.7)';
        let fontColor = 'hsla(0,0%,100%,1)';
        let borderColor = 'hsla(153,100%,40%,1)';
        let shadowColor = 'hsla('+Hue+',100%,50%,1)';
        div.style.backgroundColor = bgColor
        let size = Math.round(30 + Math.pow(context.count/count,1/5) * 20);
        div.style.width = div.style.height = size+'px';
        div.style.border = 'solid 1px '+ borderColor;
        div.style.borderRadius = size/2 + 'px';
        div.style.boxShadow = '0 0 1px '+ shadowColor;
        div.innerHTML = context.count;
        div.style.lineHeight = size+'px';
        div.style.color = fontColor;
        div.style.fontSize = '14px';
        div.style.textAlign = 'center';
        context.marker.setOffset(new AMap.Pixel(-size/2,-size/2));
        context.marker.setContent(div)
      },
      handleCopy(text, event) {
        clip(text+'', event)
      },
      checkMore(){
        let rootPath = this.$route.matched[0];
        if(rootPath.path===""){
          this.$router.push('/gailan/exceptionRecord')
        }else{
          // 加载更多修改
          let lastPath = this.queryParams.channelId!==undefined?"/"+this.queryParams.channelId:''
          this.$router.push(rootPath.path+'/exceptionRecord'+lastPath)
        }
      },
      initPage(){
        this.listQuery.page =  1;
        this.listQuery.limit = 20;
      },
      unhandleChange(){
        // 火警列表和故障列表切换
        this.unhandleItems = [];
        if(this.unhandleList==='fireUntreated'){
          this.initPage();
          this.listQuery.alrmCategory = 1;
          this.getUnhandleL();
          this.alarmtype = 1;
        }else{
          this.initPage();
          this.listQuery.alrmCategory = 0;
          this.getUnhandleL();
          this.alarmtype = 0;
        }
      },
      handleRows(rowId){
        this.isdelalram = true;
        this.switchalramtype = '1';
        this.rowsId = rowId;
      },
      handleSure(){
        changeFireRsolve(this.$qs.stringify({id:this.rowsId,flag:this.switchalramtype})).then(res=>{
          if(res.status===200){
            this.$notify({
              title: "成功",
              message: "处理成功",
              type: "success",
              duration: 2000
            });
            this.isdelalram=false;
            this.switchalramtype = '1';
            this.getUnhandleL();
          }
        }).catch(res=>{
          this.$notify({
            title: "提示",
            message: "网络异常！",
            type: "warning",
            duration: 2000
          });
          this.isdelalram=false;
        })
      },
      handleCurrentChange(val) {
        //  简版翻页
        this.listQuery.page = val;
        this.getUnhandleL();
      },
      changeMode(type){
        //this.isExpand=false;
        this.unhandleList = 'fireUntreated';
        switch(type){
          case "map":
            this.isSelectMode=true;
            this.isExpand = true;
            getAllStatus(this.queryParams).then(res => {
              this.totalStatus = res.data;
            })
            this.getUnhandleL()
            break;
          case "list":
            this.isSelectMode=false;
            this.isExpand = false;
            break;
        }
      },
      fetchData(){
        //修复高德地图加载的bug
        if(localStorage.getItem('logined')){
          let addStorage  = localStorage.getItem('logined');
          this.clearMapstore()
          localStorage.setItem('logined',addStorage);
        }else{
          this.clearMapstore()
        }
        this.channelId = this.$route.params.id;
        this.queryParams.channelId = this.$route.params.id;
        this.getBuildList(this.queryParams);
        this.isExpand = true;
        this.changeMode("map");
        if (this.issuperadmin){
          this.getAllTenant();
        }
      },
      getBuildList(query) {
        let self = this;
        getBuildingList(query).then(res => {
          this.states = res.data;
          this.markers = res.data;
          let markers = [];
          for (let i = 0; i < this.markers.length; i++) {
            markers.push({
              position: [this.markers[i].gisx, this.markers[i].gisy],
              id: this.markers[i].id,
              label: this.markers[i].name,
              status: this.markers[i].status,
              count: this.markers[i].count,
              events: {
                init(o) {
                  self.markerRefs.push(o);
                }
              }
            });
          }
          this.markers = [];
          this.markers = markers;
        });
      },
      changeIt() {
        this.isExpand = !this.isExpand;
        // 展开列表请求
        if(this.isExpand){
          getAllStatus(this.queryParams).then(res => {
            this.totalStatus = res.data;
          })
          this.getUnhandleL()
        }
      },
      getUnhandleL(){
        // 加载未处理列表
        this.loading = true;
        getUnhandleList(Object.assign(this.listQuery,this.queryParams)).then( res => {
          this.loading = false
          this.total = res.data.total;
          this.unhandleItems = res.data.rows;
        })
      },
      showSensor(val) {
        this.buildId = val + "";
        this.realtimePointShow = true;
        document.querySelector(".propper-class").style.display="none";
        document.querySelector(".tenant-propper-class").style.display="none";
      },
      selectedAddress(item){
        let lnglat = item.location;
        let self = this;
        if(lnglat){
          this.center = [lnglat.lng, lnglat.lat];
        }else{
          let o = amapManager.getMap();
          o.setCity(item.name,function(){
            self.zoom = 12;
          });
        }
        // 关闭测距
        if (this.rulerFn) {
          this.rulerFn.turnOff();
        }
        this.zoom = 19;
      },
      remoteMethod(pois) {
        let self = this;
        // 选择之后的列表
        AMap.plugin(['AMap.Autocomplete'], function() {
          var autoOptions = {
            city: '', // 城市，默认全国
          }
          var autoComplete = new AMap.Autocomplete(autoOptions)
          autoComplete.search(pois, function(status, result) {
            // 搜索成功时，result即是对应的匹配数据
            if(result){
              let results = result.tips;
              if(results){
                self.searchAddressList = results;
              }
            }
          })
        })
      },
      selectHandle(command){
        this.localSearch = command;
        if (command==='1'){
          this.droptext = '建筑'
        } else if(command==='2'){
          this.droptext = '地名'
        }else {
          this.droptext = '站点'
        }
      },
      handleCommand(command) {
        if (command === "showtrafic") {
          if (this.showTraffic) {
            let o = amapManager.getMap();
            let trafficLayer = new AMap.TileLayer.Traffic();
            trafficLayer.setMap(o);
            this.Trafficlay = trafficLayer;
            this.showTraffic = false;
          } else {
            // 非第一次显示路况
            if (this.showhide) {
              this.Trafficlay.hide();
              this.showhide = false;
            } else {
              this.Trafficlay.show();
              this.showhide = true;
            }
          }
        } else if (command === "showpich") {
          let self = this;
          if (this.ruleroff) {
            // 显示测距工具
            let o = amapManager.getMap();

            o.plugin(["AMap.RangingTool"], function() {
              let ruler = new AMap.RangingTool(o);

              ruler.turnOn();

              self.$nextTick();

              self.rulerFn = ruler;
              self.ruleroff = false;
            });
          } else {
            self.rulerFn.turnOff();
            self.ruleroff = true;
          }
        } else if (command === "showDensity") {
          let self = this;

          let o = amapManager.getMap();
          if(!this.desme){

            o.plugin(["AMap.MouseTool"], function() {
              let mouseTool = new AMap.MouseTool(o);
              self.desme = mouseTool;
              //鼠标工具插件添加draw事件监听
              AMap.event.addListener(mouseTool, "draw", function callback(e) {
                var eObject = e.obj; //obj属性就是鼠标事件完成所绘制的覆盖物对象。

                var polygon = new AMap.Polygon({
                  path: eObject.getPath(),
                  extData: "99"
                });

                let num = 0;
                let allShowDevices = self.markers;
                for (let i = 0; i < allShowDevices.length; i++) {
                  let position = allShowDevices[i].position;
                  let count = allShowDevices[i].count;
                  if (polygon.contains(position) == true)
                  // 目前是建筑物传感器数量
                    num += count;
                }

                let size = (polygon.getArea() / 1000000).toFixed(2);
                //let info = `面积:  ${size} 平方公里，数量为:  ${num} 栋`;
                let info;
                if (num > 0)
                  info = "密度为：" + (num / size).toPrecision(4) + "个/平方公里";
                else info = "无传感器";
                setTimeout(() => {
                  document
                    .querySelectorAll(".amap-marker-content>div")
                    .forEach(item => {
                      if (item.children.length < 1) {
                        if (!item.getAttribute("id")) {
                          item.setAttribute("id", "amcM-" + self.cCount++);
                          item.innerText = info;
                        }
                      }
                    });
                }, 200);
              });
              mouseTool.measureArea(); //调用鼠标工具的面积量测功能
            });
          }else{
            window.location.reload();
          }
        }
      },
      querySearch(queryString, cb) {
        if(queryString==''){cb([]);}else{
          getBuildingList(Object.assign({},this.queryParams,{bName:queryString})).then(res => {
            var buildings = res.data;
            if (buildings.length==0) {cb([]);}else{
              let buildarr = [];
              buildings.forEach((build)=>{
                buildarr.push({value:build.name,id:build.id})
                cb(buildarr);
              })
            }
          })
        }
      },
      getAllTenant(){
        getAllTenant(this.queryParams).then(res => {
          var buildings = res.data.rows;
          if (buildings.length==0) {
            this.tenantlist=[];
          }else{
            let buildarr = [];
            buildings.forEach((build)=>{
              buildarr.push({value:build.name,id:build.id})
              this.tenantlist=buildarr;
            })
          }
        })
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      tenantSearch(queryString, cb){
        var restaurants = this.tenantlist;
        if (queryString=="") {
          if (cluster) {
            cluster.setMap(null);}
          this.getBuildList(this.queryParams);
          this.mapcluster();
          /*this.getBuildList(this.queryParams);
          this.mapcluster();*/
          var results = restaurants.filter(this.createFilter(queryString));
          cb(results);
        }else{
          var results = restaurants.filter(this.createFilter(queryString));
          if (results.length==0) {
            this.$message({
              message: '站点中未添加建筑',
              type: 'warning'
            });
          }
          cb(results);
        }
      },
      freshCenter(pos){
        this.center = [pos.gisx, pos.gisy];
        this.zoom = 19;
        // 关闭测距
        if (this.rulerFn) {
          this.rulerFn.turnOff();
        }
      },
      handleSelect(build) {
        let selectedBuild = this.states.find(item => {
          return item.id === build.id;
        });
        if (selectedBuild) {
          this.freshCenter(selectedBuild);
        }
      },
      mapcluster(){
        let self = this;
        let map = amapManager.getMap();
        setTimeout(function(){
          map.plugin('AMap.MarkerClusterer', function () {
            cluster  =    new AMap.MarkerClusterer(map,self.markerRefs,{
              gridSize:80,
              minClusterSize:3,
              renderCluserMarker:self._renderCluserMarker
            });
          });
          if(cluster.length>0)
            cluster.setMarkers(self.markers);
        },0)
      },
      handleSelecttenant(val){
        let self = this;
        self.markerRefs.length=0;
        if (cluster) {
          cluster.setMap(null);}
        self.markers.length=0;
        getTenantPos({tenantId:val.id}).then(res => {
          let markers = res.data;
          let markarr=[];
          for (let i = 0; i < markers.length; i++) {
            self.markers.push({
              position: [markers[i].gisx, markers[i].gisy],
              id: markers[i].id,
              label: markers[i].name,
              status: markers[i].status,
              count: markers[i].count,
              events: {
                init(o) {
                  self.markerRefs.push(o);
                }
              }
            });
          };
          this.mapcluster();
        });
      }
    },
    watch:{
      '$route':'fetchData'
    }
  };
</script>
<style rel="stylesheet/scss" lang="scss">
  .loadmore-btn-goto{
    text-align: center;
  }
  .map-mode-pannel,.list-mode-pannel,.untreated-list{
    .el-scrollbar__wrap {
      overflow-x: hidden;
    }
  }
  .dropdwon-svg-icon {
    margin-right: 10px;
  }
  .amap-geolocation-con {
    left: auto !important;
    right: 30px;
    bottom: 107px !important;
    z-index: auto !important;
  }
  .amap-ui-control-zoom {
    width: 35px !important;
  }
  #fmapmain {
    overflow: hidden;
    position: relative;
    .map-mode-pannel{
      display: none;
      height: 100%;
      &.map-pannel-show{
        display: block;
      }
    }
    .list-mode-pannel{
      width:100%;
      height:100%;
      display: none;
      &.list-pannel-show{
        display: block;
      }
    }
  }

  .mapset {
    height: 100%;
    .amap-logo {
      display: none !important;
    }
    .amap-copyright {
      visibility: hidden !important;
    }
    .amap-ui-control-position-rb{
      background: #fff;
    }
    .map-marker-wrap {
      .bubble {
        margin-top: -75px;
        left: 50%;
        transform: translateX(-50%);
        position: absolute;
        .build-name {
          display: inline-block;
          white-space: nowrap;
          font-style: normal;
          color: #fff;
          padding: 5px 10px;
          background-color: #00a75b;
          border-radius: 2px;
          border: 1px solid #00a75b;
          min-width: 40px;
          font-size: 12px;
        }
        .arrow-up {
          border: 4px solid transparent;
          border-top-width: 4px;
          border-top-color: #00a75b;
          display: block;
          width: 0;
          height: 0;
          margin: 0 auto;
        }
      }
      .main-map-marker {
        width: 44px;
        height: 44px;
        color: transparent;
        position: relative;
        &.main-map-marker__notify {
          background: url('../../../assets/default-images/warning.png') no-repeat;
        }
        &.main-map-marker__abnormal {
          background: url('../../../assets/default-images/abnormal.png') no-repeat;
        }
      }
    }
  }
  .map-tool {
    .map-tool__left {
      float: right;
      display: flex;
    }
  }
</style>
